<template>
	<div id="bankcard">
		<div id="header">
			<img @click="$router.go(-1)" src="../../static/img/return.png"/>
			<p>绑定银行卡</p>
			<span class="manager" @click="deleteFlag = !deleteFlag">管理</span>
		</div>
		<div v-if="bankpage == 1" class="bank_list">
			<div v-for="item in bankList" :class="getClass(item.bankName)" class="card">
				<div class="bank">
					<div class="icon">
						<img v-if="item.bankName == '中国工商银行'" src="../../static/img/gs.png"/>
						<img v-else-if="item.bankName == '中国建设银行'" src="../../static/img/js.png"/>
						<img v-else-if="item.bankName == '中国农业银行'" src="../../static/img/ny.png"/>
						<img v-else-if="item.bankName == '中国银行'" src="../../static/img/zg.png"/>
						<img v-else-if="item.bankName == '招商银行'" src="../../static/img/zs.png"/>
						<img v-else-if="item.bankName == '交通银行'" src="../../static/img/jt.png"/>
						<img v-else-if="item.bankName == '中信银行'" src="../../static/img/zx.png"/>
						<img v-else-if="item.bankName == '光大银行'" src="../../static/img/gd.png"/>
						<img v-else-if="item.bankName == '华夏银行'" src="../../static/img/hx.png"/>
						<img v-else-if="item.bankName == '民生银行'" src="../../static/img/ms.png"/>
						<img v-else-if="item.bankName == '广发银行'" src="../../static/img/gf.png"/>
						<img v-else-if="item.bankName == '兴业银行'" src="../../static/img/xy.png"/>
					</div>
					<div class="bank_name">
						<p>{{item.bankName}}</p>
						<p>{{item.cardType}}</p>
					</div>
				</div>
				<div class="bank_num">
					{{formatBankNo(encryptionCard(item.cardNum))}}
				</div>
				<img v-if="deleteFlag" @click="deleteCard(item.id)" src="../../static/img/delete.png" />
			</div>
			<!------添加银行卡-------->
			<div @click="bankpage = 2" class="add_card">
				<div class="add_left">
					<img src="../../static/img/bank-01.png"/>
					<p>添加银行卡</p>
				</div>
				<img src="../../static/img/my-12.png"/>
			</div>
		</div>
		<!--------添加银行卡表单----------->
		<div v-else-if="bankpage == 2" class="add_form">
			<p>请绑定持卡人本人的银行卡</p>
			<input type="text" v-model="cardNum" placeholder="银行卡号：" id="cardnum" />
			<img src="../../static/img/camera.png" @click='imgUpload'>
			<input @change="onFileChange($event)" id="upload" type="file" accept="image/*" style="display: none;"/>
			<input type="text" v-model="realName" placeholder="持卡人姓名：" />
			<input @click="selectOpen" type="text" placeholder="所属银行：" v-model="bankName" readonly="readonly" />
			<input type="button" @click="getCardInfo" value="绑定" />
		</div>
		<!-----------银行选择-------------->
		<div @click="selectClose" id="select" v-show="selectSwitch">
			<div class="select">
				<ul class="select_list">
					<li v-for="item in selectList" @click="bankName = item,selectClose" :class="bankName == item?'select_active':''">
						{{item}}
					</li>
				</ul>
				<input @click="selectClose" class="select_cancel" type="button" value="取消" />
			</div>
		</div>
	</div>
</template>

<script>
export default{
	name: 'bankcard',
	data:function(){
		return{
			bankpage: 1,
			bankList:[
//				{
//					bankName: '中国工商银行',
//					cardNum: '1534532354524852',
//				},
//				{
//					bankName: '中国建设银行',
//					cardNum: '1534532354524852',
//				},
//				{
//					bankName: '中国农业银行',
//					cardNum: '1534532354524852',
//				},
//				{
//					bankName: '中国银行',
//					cardNum: '1534532354524852',
//				},
//				{
//					bankName: '民生银行',
//					cardNum: '1534532354524852',
//				},
//				{
//					bankName: '光大银行',
//					cardNum: '1534532354524852',
//				},
			],
			
			selectSwitch: false,//选择菜单开关
			selectList:[//账号选择数组
				'中国工商银行',
				'中国建设银行',
				'中国农业银行',
				'中国银行',
				'招商银行',
				'交通银行',
				'中信银行',
				'光大银行',
				'华夏银行',
				'民生银行',
				'广发银行',
				'兴业银行',
			],
			bankName: '',// 所属银行
			realName: '',// 持卡人姓名
			cardNum: '',// 银行卡号
			cardType: '', // 银行卡类型
			deleteFlag: false, // 是否显示删除按钮
		}
	},
	methods:{
		getClass:function(bankName){
			if(bankName == '中国工商银行'){
				return 'card_gs';
			}else
			if(bankName == '中国建设银行'){
				return 'card_js';
			}else
			if(bankName == '中国农业银行'){
				return 'card_ny';
			}else
			if(bankName == '中国银行'){
				return 'card_zg';
			}else
			if(bankName == '招商银行'){
				return 'card_zs';
			}else
			if(bankName == '交通银行'){
				return 'card_jt';
			}else
			if(bankName == '中信银行'){
				return 'card_zx';
			}else
			if(bankName == '光大银行'){
				return 'card_gd';
			}else
			if(bankName == '华夏银行'){
				return 'card_hx';
			}else
			if(bankName == '民生银行'){
				return 'card_ms';
			}else
			if(bankName == '广发银行'){
				return 'card_gf';
			}else
			if(bankName == '兴业银行'){
				return 'card_xy';
			}
		},
		 //--------Select相关事件---------
	    selectClose: function(){//关闭选择菜单
	    	this.selectSwitch = false;
	    },
	    selectOpen: function(){//打开选择菜单
	    	this.selectSwitch = true;
	    },
	    //----------银行卡号前12位加密----------
		encryptionCard:function(str){
			if(str == undefined){
				return;
			}
			var str1 = str.split('');
			var str2 = '';
			$.each(str1,function(i){
				if(i>=12){
					str2 += str1[i];
				}else{
					str2 += '*';
				}
			})
			return str2;
		},
	    //----------银行卡号格式化--------------
		formatBankNo:function(BankNo){
		    if (BankNo == "") return;
		    var account = new String(BankNo);
		    account = account.substring(0,23); /*帐号的总数, 包括空格在内 */
		    if (account.match(".(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){7}") == null){
			      /* 对照格式 */
			    if (account.match(".(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){7}|" + ".(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){7}|" +
			      ".(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){7}|" + ".(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){4}-(\d|\\*){7}") == null){
			        var accountChar = "";
			        var accountNumeric = accountChar;
			        var i;
			        for (i=0;i<account.length;i++){
			            accountChar = account.substr (i,1);
			        	if ((accountChar != " ")) accountNumeric = accountNumeric + accountChar;
			        }
				        account = "";
				    for (i=0;i<accountNumeric.length;i++){  /* 可将以下空格改为-,效果也不错 */
				        if (i == 4) account = account + " "; /* 帐号第四位数后加空格 */
				        if (i == 8) account = account + " "; /* 帐号第八位数后加空格 */
				        if (i == 12) account = account + " ";/* 帐号第十二位后数后加空格 */
				        if (i == 16) account = account + " ";/* 帐号第十二位后数后加空格 */
				        account = account + accountNumeric.substr (i,1)
			        }
			    }
		    }else{
		    	account = " " + account.substring (1,5) + " " + account.substring (6,10) + " " + account.substring (14,18) + "-" + account.substring(18,25);
		    }
		    if (account != BankNo) return account;
		},
		//----------获取用户绑定的银行卡--------------
		getUserCard: function(){
			var _this = this;
			_this.$axios.post("/user/bankCard/getUserCard").then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.bankList = data.result;
				}
			}).catch(function(err){
				console.log(err);
			})
		},
		//----------获取银行卡信息--------------
		getCardInfo: function(){
			var _this = this;
			if(!_this.realName){
				_this.$alert("请输入持卡人姓名");
				return;
			}
			if(!_this.cardNum){
				_this.$alert("请输入银行卡号");
				return;
			}
			if(!_this.luhmCheck(_this.cardNum)){
				_this.$alert("请输入正确的银行卡号");
				return;
			}
			if(!_this.bankName){
				_this.$alert("请选择所属银行");
				return;
			}
			
			let postData = _this.$qs.stringify({
				cardNum: _this.cardNum
			});
			this.$loading();
			_this.$axios.post("/user/bankCard/getBankCardInfo", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					data = data.result;
					// 判断选择的所属银行是否正确
					if(data.bankName.indexOf(_this.bankName) != -1 || _this.bankName.indexOf(data.bankName) != -1){
						if(!_this.cardType){
							_this.cardType = data.cardType;
						}
						_this.bindCard();
					}else{
						_this.$alert("所属银行与您输入的银行卡号不匹配，请重新选择");
					}
				}else{
					_this.$alert("银行卡号输入有误，请检查并重新输入");
				}
				$("#loading").remove();
			}).catch(function(err){
				console.log(err);
				$("#loading").remove();
			})
		},
		//----------绑定银行卡--------------
		bindCard: function(){
			var _this = this;
			let postData = _this.$qs.stringify({
				cardType: _this.cardType,
				cardNum: _this.cardNum,
				bankName: _this.bankName,
				realname: _this.realName
			});
			_this.$axios.post("/user/bankCard/bindCard", postData).then(function(res){
				var data = res.data;
				if(data.message == "succ"){
					_this.$alert("绑定成功！");
					_this.getUserCard();
					_this.bankpage = 1;
				}else{
					_this.$alert(data.result);
					_this.cardType = '';
				}
			}).catch(function(err){
				console.log(err);
			})
		},
		//----------删除绑定银行卡--------------
		deleteCard: function(cardId){
			var _this = this;
			_this.$confirm("确认删除？", function(){
				let postData = _this.$qs.stringify({
					cardId: cardId
				});
				_this.$loading();
				_this.$axios.post("/user/bankCard/deleteCard", postData).then(function(res){
					var data = res.data;
					if(data.message == "succ"){
						_this.$alert("删除成功");
						_this.getUserCard();
					}else{
						_this.$alert("删除失败");
					}
					$("#loading").remove();
				}).catch(function(err){
					_this.$alert("删除失败");
					$("#loading").remove();
				});
			});
		},
		luhmCheck: function(bankno){
		    var lastNum=bankno.substr(bankno.length-1,1);//取出最后一位（与luhm进行比较）
		
		    var first15Num=bankno.substr(0,bankno.length-1);//前15或18位
		    var newArr=new Array();
		    for(var i=first15Num.length-1;i>-1;i--){    //前15或18位倒序存进数组
		        newArr.push(first15Num.substr(i,1));
		    }
		    var arrJiShu=new Array();  //奇数位*2的积 <9
		    var arrJiShu2=new Array(); //奇数位*2的积 >9
		
		    var arrOuShu=new Array();  //偶数位数组
		    for(var j=0;j<newArr.length;j++){
		        if((j+1)%2==1){//奇数位
		            if(parseInt(newArr[j])*2<9)
		                arrJiShu.push(parseInt(newArr[j])*2);
		            else
		                arrJiShu2.push(parseInt(newArr[j])*2);
		        }
		        else //偶数位
		            arrOuShu.push(newArr[j]);
		    }
		
		    var jishu_child1=new Array();//奇数位*2 >9 的分割之后的数组个位数
		    var jishu_child2=new Array();//奇数位*2 >9 的分割之后的数组十位数
		    for(var h=0;h<arrJiShu2.length;h++){
		        jishu_child1.push(parseInt(arrJiShu2[h])%10);
		        jishu_child2.push(parseInt(arrJiShu2[h])/10);
		    }
		
		    var sumJiShu=0; //奇数位*2 < 9 的数组之和
		    var sumOuShu=0; //偶数位数组之和
		    var sumJiShuChild1=0; //奇数位*2 >9 的分割之后的数组个位数之和
		    var sumJiShuChild2=0; //奇数位*2 >9 的分割之后的数组十位数之和
		    var sumTotal=0;
		    for(var m=0;m<arrJiShu.length;m++){
		        sumJiShu=sumJiShu+parseInt(arrJiShu[m]);
		    }
		
		    for(var n=0;n<arrOuShu.length;n++){
		        sumOuShu=sumOuShu+parseInt(arrOuShu[n]);
		    }
		
		    for(var p=0;p<jishu_child1.length;p++){
		        sumJiShuChild1=sumJiShuChild1+parseInt(jishu_child1[p]);
		        sumJiShuChild2=sumJiShuChild2+parseInt(jishu_child2[p]);
		    }
		    //计算总和
		    sumTotal=parseInt(sumJiShu)+parseInt(sumOuShu)+parseInt(sumJiShuChild1)+parseInt(sumJiShuChild2);
		
		    //计算Luhm值
		    var k= parseInt(sumTotal)%10==0?10:parseInt(sumTotal)%10;
		    var luhm= 10-k;
		
		    if(lastNum==luhm){
		        return true;
		    }
		    else{
		        return false;
		    }
		},
		
		// ------ 自动获取银行卡信息 ---------
		onFileChange: function(e,Url){
	        //获取图片文件
	        let files = e.target.files || e.dataTransfer.files;
	        lrz(files[0], {width: 480}).then((rst) => {
	        	this.confirm(rst.base64);
	        }).always(() => {
	            // 每次压缩完之后要将input内容清空，不然会出现传出去的内容不对的bug
	            e.target.value = null
	        })
	    },
	    imgUpload: function(){
			$("#upload").trigger('click');
	    },
	    confirm: function(images){
	    	var _this = this;
	    	let postData = _this.$qs.stringify({
	    		image: images
	    	});
	    	_this.$loading();
	    	_this.$axios.post('/ocr/public/getBankInfo', postData).then(function(res){
	    		var data = res.data;
	    		if(data.message == "succ"){
	    			data = data.result;
	    			if(data.msg == "ok"){
	    				_this.cardNum = data.data.item_list[0].itemstring;
	    				var name = data.data.item_list[3].itemstring;
	    				name = name.substring(0,4);
	    				for(var i=0; i<_this.selectList.length;i++){
	    					if(_this.selectList[i].indexOf(name) != -1){
	    						_this.bankName = _this.selectList[i];
	    						break;
	    					}
	    				}
	    				_this.cardType = data.data.item_list[1].itemstring;
	    			}else{
	    				_this.$alert("获取银行卡信息失败，请手动输入。");
	    			}
	    		}
	    		$("#loading").remove();
	    	}).catch(function(err){
	    		console.log(err);
	    		_this.$alert("获取银行卡信息失败，请手动输入。");
	    		$("#loading").remove();
	    	});
	    }
	},
	created: function(){
		this.getUserCard();
	}
}
</script>

<style scoped>
/* ========== */
/* = Header = */
/* ========== */
#cardnum{
	display: inline-block; 
	width: 82%; 
	margin-left: 1rem; 
	box-sizing: border-box; 
	margin-right: 1rem;
}
#header{
	width: 100%;
	background-color: #fff;
	position: fixed;
	top: 0;
	left: 0;
	height: 4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.6rem;
	color: #4F4F4F;
	box-sizing: border-box;
	z-index: 10;
}
.manager{
	position: absolute;
    right: 2rem;
    font-size: 1.2rem;
    height: 4rem;
    line-height: 4rem;
}
#header img{
	height: 2rem;
	display: block;
	position: absolute;
	top: 1rem;
	left: 2rem;
}
#bankcard{
	min-height: 100%;
	padding-top: 5rem;
	padding-bottom: 0.5rem;
	box-sizing: border-box;
	background-color: #fff;
}
/*------工商-------*/
.card_gs{
	width: 94%;
	margin: 0 auto;
	background:#ff5666 url('../../static/img/gs2.png') no-repeat;
	background-size: auto 100%;
	background-position-x: 90%;
	padding: 1rem;
	box-sizing: border-box;
	margin-bottom: 1rem;
	position: relative;
}
/*------中国-------*/
.card_zg{
	width: 94%;
	margin: 0 auto;
	background:#ff5666 url('../../static/img/zg2.png') no-repeat;
	background-size: auto 100%;
	background-position-x: 90%;
	padding: 1rem;
	box-sizing: border-box;
	margin-bottom: 1rem;
	position: relative;
}
/*------招商-------*/
.card_zs{
	width: 94%;
	margin: 0 auto;
	background:#ff5666 url('../../static/img/zs2.png') no-repeat;
	background-size: auto 100%;
	background-position-x: 90%;
	padding: 1rem;
	box-sizing: border-box;
	margin-bottom: 1rem;
	position: relative;
}
/*------中信-------*/
.card_zx{
	width: 94%;
	margin: 0 auto;
	background:#ff5666 url('../../static/img/zx2.png') no-repeat;
	background-size: auto 100%;
	background-position-x: 90%;
	padding: 1rem;
	box-sizing: border-box;
	margin-bottom: 1rem;
	position: relative;
}
/*------华夏-------*/
.card_hx{
	width: 94%;
	margin: 0 auto;
	background:#ff5666 url('../../static/img/hx2.png') no-repeat;
	background-size: auto 100%;
	background-position-x: 90%;
	padding: 1rem;
	box-sizing: border-box;
	margin-bottom: 1rem;
	position: relative;
}
/*------广发-------*/
.card_gf{
	width: 94%;
	margin: 0 auto;
	background:#ff5666 url('../../static/img/gf2.png') no-repeat;
	background-size: auto 100%;
	background-position-x: 90%;
	padding: 1rem;
	box-sizing: border-box;
	margin-bottom: 1rem;
	position: relative;
}
/*------建设-------*/
.card_js{
	width: 94%;
	margin: 0 auto;
	background:#4594d8 url('../../static/img/js2.png') no-repeat;
	background-size: auto 100%;
	background-position-x: 90%;
	padding: 1rem;
	box-sizing: border-box;
	margin-bottom: 1rem;
	position: relative;
}
/*------交通-------*/
.card_jt{
	width: 94%;
	margin: 0 auto;
	background:#4594d8 url('../../static/img/jt2.png') no-repeat;
	background-size: auto 100%;
	background-position-x: 90%;
	padding: 1rem;
	box-sizing: border-box;
	margin-bottom: 1rem;
	position: relative;
}
/*------兴业-------*/
.card_xy{
	width: 94%;
	margin: 0 auto;
	background:#4594d8 url('../../static/img/xy2.png') no-repeat;
	background-size: auto 100%;
	background-position-x: 90%;
	padding: 1rem;
	box-sizing: border-box;
	margin-bottom: 1rem;
	position: relative;
}
/*------农业-------*/
.card_ny{
	width: 94%;
	margin: 0 auto;
	background:#44c16a url('../../static/img/ny2.png') no-repeat;
	background-size: auto 100%;
	background-position-x: 90%;
	padding: 1rem;
	box-sizing: border-box;
	margin-bottom: 1rem;
	position: relative;
}
/*------民生-------*/
.card_ms{
	width: 94%;
	margin: 0 auto;
	background:#44c16a url('../../static/img/ms2.png') no-repeat;
	background-size: auto 100%;
	background-position-x: 90%;
	padding: 1rem;
	box-sizing: border-box;
	margin-bottom: 1rem;
	position: relative;
}
/*------光大-------*/
.card_gd{
	width: 94%;
	margin: 0 auto;
	background:#9749ae url('../../static/img/gd2.png') no-repeat;
	background-size: auto 50%;
	background-position-x: 90%;
	background-position-y: center;
	padding: 1rem;
	box-sizing: border-box;
	margin-bottom: 1rem;
	position: relative;
}
.card{
	position: relative;
}
.card>img{
	position: absolute;
    top: -0.6rem;
    right: -0.6rem;
    display: block;
    width: 2rem;
    height: 2rem;
}
.bank{
	display: flex;
	align-items: center;
	color: #FFFFFF;
}
.bank .icon{
	width: 3.6rem;
	height: 3.6rem;
	padding: 0.3rem;
	box-sizing: border-box;
	border-radius: 50%;
	display: flex;
	align-items: center;
	background-color: rgba(255,255,255,0.7);
	margin-right: 1rem;
}
.bank .icon img{
	width: 100%;
	display: block;
}
.bank .bank_name{
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.bank .bank_name p:first-child{
	margin-bottom: 0.5rem;
	font-size: 1.2rem;
}
.bank_num{
	font-size: 1.6rem;
	color: #FFFFFF;
	margin-left: 4.6rem;
	margin-top: 0.8rem;
}
.delete{
	height: 2.4rem;
	display: block;
	position: absolute;
	top: 0;
	right: 0;
}
/*------添加银行卡-------*/
.add_card{
	padding: 1rem 3%;
	box-sizing: border-box;
	background-color: #FFFADB;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-top: 1px solid #EEEEEE;
	border-bottom: 1px solid #EEEEEE;
	font-size: 1.2rem;
	color: #4F4F4F;
	margin-bottom: 1rem;
}
.add_card img{
	height: 1.2rem;
	display: block;
}
.add_left{
	display: flex;
	align-items: center;
}
.add_left img{
	margin-right: 0.5rem;
}
/*---------添加银行卡表单---------*/
.add_form p{
	font-size: 1.2rem;
	color: #4F4F4F;
	padding: 1rem 3%;
	box-sizing: border-box;
}
.add_form input[type='text']{
	width: 94%;
	height: 3rem;
	display: block;
	margin: 0 auto;
	border: 1px solid #EEEEEE;
	padding-left: 1rem;
	background-color: #fff;
	box-sizing: border-box;
	margin-bottom: 1rem;
}
.add_form input[type='button']{
	width: 94%;
	display: block;
	margin: 0 auto;
	background-color: #FF6565;
	color: #FFFFFF;
	height: 3.2rem;
	font-size: 1.2rem;
	border: none;
}
/*--------银行选择-----------*/
#select{
	width: 100%;
	height: 100%;
	position: fixed;
	bottom: 0;
	left: 0;
	background-color: rgba(0,0,0,0.7);
	z-index: 11;
}
#select .select{
	width: 100%;
	height: 16rem;
	position: fixed;
	bottom: 1rem;
	left: 0;
}
#select .select .select_list{
	overflow-y: scroll;
	-webkit-overflow-scrolling: touch;
	height: 12rem;
	width: 94%;
	margin: 0 auto;
	border-radius: 5px 5px 0 0;
	background-color: #fff;
}
#select .select .select_list li{
	width: 100%;
	height: 4rem;
	font-size: 1.2rem;
	color: #787878;
	display: flex;
	align-items: center;
	justify-content: center;
	border-top: 1px solid #EEEEEE;
	box-sizing: border-box;
}
#select .select .select_list li.select_active{
	color: #FF6565;
}
#select .select .select_cancel{
	width: 94%;
	display: block;
	margin: 0 auto;
	border-radius: 0 0 5px 5px;
	height: 4rem;
	border: none;
	border-top: 1px solid #EEEEEE;
	background-color: #EEEEEE;
	color: #787878;
	font-size: 1.2rem;
}
</style>
